import React from "react";
import { RouterRowState, ROUTER_LIST } from "./routes";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { MainLayout } from "../components";

interface PropsType {
  route: RouterRowState;
}

// 路由前置组件--hoc
const BeforeEachRouter: React.FC<PropsType> = (props) => {
  // 权限验证
  const role = localStorage.getItem("role") || "";

  if (props.route.roles && !props.route.roles.includes(role)) {
    return (
      <div>非常遗憾， 你没有权限 403！！！！！！！！！！！！！！！！！！！</div>
    );
  }

  // 白名单页面： 免登陆
  const whiteList = ["/login"];
  // 是否登录
  const token = localStorage.getItem("token");
  if (token) {
    // 已经登录  访问白名单页面， 拦截到首页
    if (whiteList.includes(props.route.path)) {
      return <Navigate to="/"></Navigate>;
    } else {
      // 已经登录  访问非白名单页面， 正常访问
      return props.route.element;
    }
  } else {
    // 未登录

    // 未登录， 但是方式访问的是白名单， 正常访问
    if (whiteList.includes(props.route.path)) {
      return props.route.element;
    } else {
      // 未登录， 但是方式访问的不是白名单， 拦截到登录
      return <Navigate to="/login"></Navigate>;
    }
  }
};

// 渲染视图
const routerView = (routes: RouterRowState[]) => {
  return routes.map((v, i) => {
    return (
      <Route
        key={i}
        path={v.path}
        element={<BeforeEachRouter route={v}></BeforeEachRouter>}
      ></Route>
    );
  });
};

// 路由组件
const Index: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>{routerView(ROUTER_LIST)}</Routes>
    </BrowserRouter>
  );
};

export default Index;
